docs(images): re-record the demo GIF from a scripted walkthrough#424
Merged
Conversation
The README demo GIF was a hand recording from June 26 and predated the regulatory crosswalk, license classification, and current New scan form. Hand recordings also rot silently every time the UI moves. Replace it with a reproducible recording: a @demo-tagged Playwright spec drives a stubbed scan through the walkthrough the old GIF showed (New scan, Overview, Components with a filter, Vulnerabilities with an expanded CVE, Dependencies as graph then tree, Licenses), records the video in the same pinned container as the guide screenshots, and an ffmpeg palette pass converts it to the committed GIF. The stub data now exercises the current UI, including the license classification axis. `npm run demo:record` re-records; the exact container and ffmpeg commands are in the spec header. The spec is excluded from test:ui.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
docs/images/web-ui-demo.gif(the README hero) was a hand recording from Jun 26 — it predates the regulatory crosswalk, the license classification axis, and the current New scan form, and as a manual artifact it rots silently on every UI change. This was the last remaining item from the screenshot-freshness work (#416 noted it as a manual follow-up).What
tests/ui/record-demo.spec.ts(@demo, excluded fromtest:ui): drives a stubbed scan through the same walkthrough the old GIF showed — New scan (typed identity), Overview, Components + "Has vulnerabilities" filter, Vulnerabilities with the critical CVE expanded, Dependencies as graph then tree, Licenses — and records a 900×563 video. The stub data exercises the current UI, including the copyleft classification axis and EPSS/KEV fields.npm run demo:recordis the entry point.Verification
test:uiexclusion verified (--listshows 0 demo tests); full suite unaffected